<template>
  <a-card title="系统评分" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
    <div class="scoreinfo">
      <a-row :gutter="24">
        <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '15px' }">
          <p>系统资源</p>
          <ve-radar :data="chartData" :extend="chartExtend" height="165px"></ve-radar>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '15px' }">
          <p>服务能力</p>
          <ve-radar :data="serviceData" :extend="chartExtend" height="165px"></ve-radar>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '15px' }">
          <p>运行运维</p>
          <ve-radar :data="runData" :extend="chartExtend" height="165px"></ve-radar>
        </a-col>
      </a-row>
    </div>
  </a-card>
</template>

<script>
export default {
  name: 'ScoreInfo',
  data () {
    return {
      chartExtend: {
        title: {
          // text: '系统资源',
          x: 'center',
          y: '-5px',
          textStyle: {
            fontSize: 14,
            color: '#333'// 主标题文字颜色
          }
        },
        radar: {
          splitArea: {
            show: false
          },
          splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
            lineStyle: {
              color: '#d9d9d9',
              // 分隔线颜色
              width: 1
              // 分隔线线宽
            }
          },
          axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
            lineStyle: {
              color: '#999',
              // 坐标轴线线的颜色。
              width: 1,
              // 坐标轴线线宽。
              type: 'solid'
              // 坐标轴线线的类型。
            }
          },
          shape: 'circle',
          center: ['50%', '50%'],
          radius: 50
        },
        series: {
          tooltip: {
            trigger: 'item'
          },
          areaStyle: { // 单项区域填充样式
            normal: {
              color: 'rgba(255,0,0,0.6)' // 填充的颜色。[ default: "#000" ]
            }
          }
        }
      },
      chartData: {
        columns: ['系统资源', 'CPU资源容量', 'CPU资源使用率', '内存资源容量', '内存资源使用率'],
        rows: [
          { '系统资源': '', 'CPU资源容量': 1393, 'CPU资源使用率': 1093, '内存资源容量': 32, '内存资源使用率': 132 },
          { '系统资源': '', 'CPU资源容量': 3530, 'CPU资源使用率': 3230, '内存资源容量': 26, '内存资源使用率': 302 },
          { '系统资源': '', 'CPU资源容量': 2923, 'CPU资源使用率': 2623, '内存资源容量': 76, '内存资源使用率': 112 },
          { '系统资源': '', 'CPU资源容量': 1723, 'CPU资源使用率': 1423, '内存资源容量': 49, '内存资源使用率': 32 }
        ]
      },
      serviceData: {
        columns: ['系统资源', 'CPU资源容量', 'CPU资源使用率', '内存资源容量', '内存资源使用率'],
        rows: [
          { '系统资源': '', 'CPU资源容量': 1393, 'CPU资源使用率': 1093, '内存资源容量': 32, '内存资源使用率': 132 },
          { '系统资源': '', 'CPU资源容量': 3530, 'CPU资源使用率': 3230, '内存资源容量': 26, '内存资源使用率': 302 },
          { '系统资源': '', 'CPU资源容量': 2923, 'CPU资源使用率': 2623, '内存资源容量': 76, '内存资源使用率': 112 },
          { '系统资源': '', 'CPU资源容量': 1723, 'CPU资源使用率': 1423, '内存资源容量': 49, '内存资源使用率': 32 }
        ]
      },
      runData: {
        columns: ['运行运维', '事件频繁度', '系统宕机数', '应急频繁度', '硬件故障率'],
        rows: [
          { '运行运维': '', '事件频繁度': 193, '系统宕机数': 93, '应急频繁度': 32, '硬件故障率': 32 },
          { '运行运维': '', '事件频繁度': 530, '系统宕机数': 330, '应急频繁度': 26, '硬件故障率': 22 },
          { '运行运维': '', '事件频繁度': 923, '系统宕机数': 23, '应急频繁度': 76, '硬件故障率': 12 },
          { '运行运维': '', '事件频繁度': 123, '系统宕机数': 13, '应急频繁度': 49, '硬件故障率': 2 }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    handleCancel () {
      this.close()
    }
  }
}
</script>
<style lang="less" scoped>
.scoreinfo{
  p{
    text-align: center;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
  }
}
</style>
